<script
	lang="ts"
	setup
>
import { menuPost, menuPut } from '@/api'
import EmptyModal from '@/components/EmptyModal.vue'
import { MENU_FRAME_ENUM, MENU_STATUS_ENUM, MENU_TYPE_LIST, MENU_VISIBLE_ENUM } from '@/const/menu.list'
import type { IMenuPost, IMenuPut } from '@/typed/request'
import type { OMenuListGetItem } from '@/typed/response'
import { type FormInst, type FormRules } from 'naive-ui'
import { computed, ref, watch } from 'vue'

interface IProps {
	show: boolean;
	data?: OMenuListGetItem;
	width?: number | string;
	options: OMenuListGetItem[]
}

const formRef = ref<FormInst | null>(null)
const emit = defineEmits(['update:show', 'update:list'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})
const initForm: IMenuPost | IMenuPut = {
	menuId: undefined,
	parentId: 0,
	menuName: '',
	menuType: undefined,
	path: '',
	perms: '',
	status: 0,
	visible: 0,
	frame: 0,
	orderNum: 0,
};

const loading = ref(false)
const modalForm = ref<IMenuPost | IMenuPut>({ ...initForm })
const modalTitle = computed(() => {
	if (props.data?.menuId) {
		return '编辑菜单'
	} else {
		return '新建菜单'
	}
})
const rules: FormRules = {
	menuName: [{
		required: true,
		message: '请输入菜单名称',
		trigger: ['blur', 'input']
	}],
	perms: [{
		required: true,
		message: '请输入权限标志',
		trigger: ['blur', 'input']
	}],
}

watch(() => props.data, () => {
	if (props.data) {
		modalForm.value = {
			menuId: props.data.menuId,
			parentId: props.data.parentId,
			menuName: props.data.menuName,
			menuType: props.data.menuType,
			path: props.data.path,
			perms: props.data.perms,
			status: props.data.status,
			visible: props.data.visible,
			frame: props.data.isFrame,
			orderNum: props.data.orderNum,
		}
	} else {
		modalForm.value = initForm;
	}

})

async function onAdd() {
	formRef.value?.validate(async (errors) => {
		if (!errors) {
			loading.value = true
			const { code } = props.data?.menuId ? await menuPut(modalForm.value as IMenuPut) : await menuPost(modalForm.value as IMenuPost);
			loading.value = false
			if (code === 200) {
				window.$message.success('保存成功')
				modalForm.value = { ...initForm }

				emit('update:list')
				emit('update:show', false)
			}
		}
	})
}

function onUpdateShow(show: boolean) {
	emit('update:show', show)
}
</script>

<template>
	<EmptyModal
		:show="show"
		@update:show="onUpdateShow"
		:loading="loading"
		:width="600"
		:title="modalTitle"
		@confirm="onAdd"
	>
		<n-form
			ref="formRef"
			:model="modalForm"
			label-placement="left"
			label-width="140"
			:rules="rules"
		>
			<n-form-item
				label="根目录"
				path="status"
			>
				<n-tree-select
					placeholder="请选择根目录"
					clearable
					:options="options"
					label-field="menuName"
					value-field="menuId"
					key-field="menuId"
					v-model:value="modalForm.parentId"
				/>
			</n-form-item>
			<n-form-item
				label="菜单名称"
				path="menuName"
			>
				<n-input
					placeholder="请输入菜单名称"
					v-model:value="modalForm.menuName"
				/>
			</n-form-item>
			<n-form-item
				label="菜单类型"
				path="status"
			>
				<n-select
					placeholder="请选择菜单类型"
					:options="MENU_TYPE_LIST"
					v-model:value="modalForm.menuType"
				/>
			</n-form-item>
			<n-form-item
				label="页面地址"
				path="path"
			>
				<n-input
					placeholder="请输入菜单名称"
					v-model:value="modalForm.path"
				/>
			</n-form-item>
			<n-form-item
				label="权限名"
				path="perms"
			>
				<n-input
					placeholder="请输入权限标志，纯英文: xxx:xxx"
					v-model:value="modalForm.perms"
				/>
			</n-form-item>
			<n-form-item
				label="显示顺序"
				path="seqno"
			>
				<n-input-number
					v-model:value="modalForm.orderNum"
					placeholder="请填写显示顺序"
					style="width: 100%"
				/>
			</n-form-item>
			<n-form-item
				label="是否启用菜单"
				path="status"
			>
				<n-switch
					v-model:value="modalForm.status"
					:checked-value="MENU_STATUS_ENUM.enable"
					:unchecked-value="MENU_STATUS_ENUM.disable"
				/>
			</n-form-item>
			<n-form-item
				label="是否显示菜单"
				path="visible"
			>
				<n-switch
					v-model:value="modalForm.visible"
					:checked-value="MENU_VISIBLE_ENUM.enable"
					:unchecked-value="MENU_VISIBLE_ENUM.disable"
				/>
			</n-form-item>
			<n-form-item
				label="是否是外部连接"
				path="visible"
				v-if="modalForm.menuType==='C'"
			>
				<n-switch
					v-model:value="modalForm.frame"
					:checked-value="MENU_FRAME_ENUM.yes"
					:unchecked-value="MENU_FRAME_ENUM.not"
				/>
			</n-form-item>
		</n-form>
	</EmptyModal>
</template>

<style
	lang="less"
	scoped
>

</style>
